import React, {useMemo} from "react";
import {show, hide} from 'react-functional-modal';
import styled from "styled-components";
import {colors} from "../common/common";
import {FlexViewBetween, MainButton, PlaceholderView} from "./components";
import useBalanceOf from "../hooks/useBalanceOf";
import useBasisCash from "../hooks/useBasisCash";
import useTokenBalance from "../hooks/useTokenBalance";
import {getDisplayBalance, getFullDisplayBalance} from "../utils/formatBalance";
type deop_type = {
    token?:string,
    displayBalance?:string,
    confirm?:any,
    depo?:boolean
}
const DepoView = React.memo(({token,displayBalance,confirm,depo}:deop_type) => {
    const basisCash = useBasisCash();
    console.log('basisCash', basisCash);
    const [balance,setBalance] = React.useState(displayBalance);
    return (
        <ModalView
            // onClick={DepoManager.hide}
        >
            <DepoWrap>
                <H1Title>{depo?"质押":"提取"} {token}</H1Title>
                <H4Title>
                    {depo?"质押":"提取"} {displayBalance} {token}
                </H4Title>
                <div
                    style={{display: 'flex', padding:'10px',width:'100%',alignItems:'center',borderRadius: '20px', backgroundColor: colors.E5E5E5}}
                >
                    <Input
                        type={'number'}
                        value={balance}
                        max={balance}
                        min={0}
                        placeholder={"请输入数量"}
                        onChange={(e)=>setBalance(e.currentTarget.value)}
                    ></Input>
                    <MaxBtn
                        onClick={()=>{
                            setBalance(displayBalance)
                        }}
                    >
                        MAX
                    </MaxBtn>
                </div>
                <PlaceholderView
                    height={'70px'}
                ></PlaceholderView>
                <FlexViewBetween>
                    <MainButton
                        title={"取消"}
                        onClick={DepoManager.hide}
                    ></MainButton>
                    <MainButton
                        onClick={()=>{
                            DepoManager.hide();
                            confirm(balance)
                        }}
                        title={"确认"}
                    ></MainButton>
                </FlexViewBetween>
            </DepoWrap>
        </ModalView>
    )
})
const DEPO_KEY = '_depo';
export const DepoManager = {
    show: function (props: deop_type) {
        show(<DepoView
            {...props}
        ></DepoView>, {key: DEPO_KEY})
    },
    hide: function () {
        hide(DEPO_KEY)
    }
}
const ModalView = styled.div`
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:999;
    background:${colors.black_7};
    display:flex;
    align-items:center;
    justify-content:center;
`
const DepoWrap = styled.div`
    width:800px;
    padding-left:40px;
    padding-right:40px;
    padding-top:30px;
    padding-bottom:30px;
    background:${colors.white};
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    @media (max-width: 768px) {
        width:90%;
        padding-left:20px;
        padding-right:20px;
        padding-top:20px;
        padding-bottom:20px;   
        border-radius:10px; 
    }
`
const Input = styled.input`
    flex:1;
    border: 0px;
    background-color: transparent;
    outline: none;
    height:100%;
    &:focus{
       outline: none; 
    }
`
const MaxBtn = styled.span`
 width: 120px;
 height: 60px;
 border-radius: 20px;
 background-color: ${colors.white};
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: bold;
  color: ${colors.black};
  @media (max-width: 768px) {
        width: 80px;
        height: 40px;
        font-size: 15px;
    }
`
const H4Title = styled.span`
    font-size: 20px;
    font-weight: bold;
    color: ${colors.black};
     margin-top: 30px;
     align-self: flex-end;
     @media (max-width: 768px) {
        font-size: 15px;
        margin-top: 10px;
    }
`
const H1Title = styled.span`
   font-size: 30px; 
   font-weight: 800;
   color: ${colors.black};
   @media (max-width: 768px) {
        font-size: 18px;
    }
`
